<template>
	<view>
		<np-navbar ref="navBar">会员等级</np-navbar>
		<view class="info">
			<image class="info-bg" src="/static/images/info-bg.png" mode=""></image>
			<view class="user-box">
				<text class="level">{{nowLevel.name || '注册会员'}}</text>
				<view class="next-level" v-if="hasNextLevel">
					<view>
						下一等级：
						<text class="level-tag bg-gradual-purple">{{nextLevel.name}}</text>
					</view>
					<view>
						升级条件：
						<text class="level-tag bg-gradual-purple">近3个月累计佣金{{nextLevel.money}}元</text>
					</view>
				</view>
				<text class="level-tip" v-else>恭喜您成为顶级会员</text>
			</view>
		</view>
		<np-div :size="28" :bold="true" color="#333" width="50%">会员权益</np-div>
		<view class="level-list">
			<view class="level-item" v-for="(item,index) in list" :key="index" v-if="list.length > 0">
				<text class="item-name">{{item.name}}</text>
				<view class="item-line"></view>
				<view class="item-color">等级要求：
					<text class="item-money">近3个月佣金{{item.money}} - {{item.money_end}}</text>
				</view>
				<view class="item-color">等级权益：
					<text class="item-detail">{{item.detail}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const statusBarHeight = uni.getSystemInfoSync().statusBarHeight
	export default {
		data(){
			return {
				nowLevel: "",
				nextLevel: {},
				hasNextLevel: false,
				list: []
			}
		},
		onLoad() {
			this.getLevel();
		},
		methods:{
			getLevel(){
				this.$http.get('api/user/level').then((res) => {
					this.nowLevel = res.nowLevel;
					this.nextLevel = res.nextLevel;
					if (res.nextLevel) {
						this.hasNextLevel = true;
					}
					this.list = res.list;
				}).catch((err) => {
					
				});
			}
		}
	}
</script>

<style>
	.info {
		position: relative;
		padding: 0 15rpx;
		width: 730rpx;
		height: 360rpx;
	}

	.info-bg {
		position: absolute;
		width: 730rpx;
		height: 360rpx;
	}
	
	.user-box{
		position: absolute;
		top: 90rpx;
		left: 30rpx;
		right: 30rpx;
		color: #FFFFFF;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	
	.level {
		font-size: 48rpx;
		font-weight: bold;
	}
	
	.next-level {
		display: flex;
		flex-direction: column;
		margin-top: 40rpx;
		font-size: 24rpx;
	}
	
	.level-tag {
		font-size: 22rpx;
		font-weight: 600;
		padding: 0 8rpx;
		height: 30rpx;
		line-height: 30rpx;
		border-radius: 6rpx;
		margin-right: 5rpx;
		vertical-align: middle;
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
	}
	
	.next-tip {
		color: #FFFFFF;
		font-size: 26rpx;
	}
	
	.level-tip{
		font-size: 26rpx;
		margin-top: 40rpx;
		color: #FFFFFF;
	}
	
	.level-list {
		padding: 0 15rpx;
	}
	
	.level-item {
		background: #FFFFFF;
		border-radius: 10rpx;
		padding: 20rpx;
		display: flex;
		flex-direction: column;
		font-size: 24rpx;
		margin: 20rpx 0;
	}
	
	.item-name {
		font-size: 30rpx;
		font-weight: 600;
		padding: 5rpx 0;
	}
	.item-line {
		padding: 5rpx 0;
		border-bottom: 2rpx #E7EBED solid;
	}
	
	.item-color{
		margin: 15rpx 0;
		color: #FFB925;
	}
	
	.item-money{
		color: #666666;
	}
	
	.item-detail {
		color: #666666;
	}
</style>
